<template>
    <div class="sale-restriction-management">
        <search-form :searchArray="searchArray"></search-form>
        <div class="table-box">
            <div class="control">
                <el-button type="primary" @click="$router.push({path: '/goods/addRestrictionAgent'})">添加控销商品代理</el-button>
            </div>
            <elTable :formData="formData" @tableData="getList" ref="dataInfo">
                <el-table-column prop="group" label="商品名称" align="center"></el-table-column>
                <el-table-column prop="group" label="批准文号" align="center"></el-table-column>
                <el-table-column prop="loginTime" label="规格" align="center"></el-table-column>
                <el-table-column prop="loginTime" label="控销区域类型" align="center"></el-table-column>
                <el-table-column prop="action" label="操作" align="center" width="200px">
                    <template slot-scope="scope">
                        <el-button type="error" size="mini" @click="editer(scope.row)">查看</el-button>
                        <el-button type="primary" size="mini" @click="editer(scope.row)">修改</el-button>
                        <el-button type="primary" size="mini" @click="editer(scope.row)" style="margin-bottom: 0;">删除</el-button>
                        <el-button type="primary" size="mini" @click="editer(scope.row)" style="margin-bottom: 0;">查看控销协议</el-button>
                    </template>
                </el-table-column>
            </elTable>
        </div>
    </div>
</template>
<script>
import elTable from "@/components/xForm/elTable"
export default {
    name: 'saleRestrictionManagement',
    components: {
        elTable
    },
    data () {
        return {
            formData: {
                name: "",
                userName: "",
                userStatus: "",
                currentPage: 1,
                pageSize: 10,
            },
            searchArray: [
                {
                    type: "input",
                    placeholder: "请输入商品名称",
                    types: "text",
                    value: "",
                    label: "商品名称"
                },
                {
                    type: "input",
                    placeholder: "请输入批准文号",
                    types: "text",
                    value: "",
                    label: "批准文号"
                }
            ]
        }
    },
    methods: {
        getList(pageNo) {
            let dataInfo = [
                {
                    id: 1,
                    name: "你好",
                    createTime: '1595244696000'
                },
                {
                    id: 2,
                    name: "你好1",
                    createTime: '1595244696000'
                },
            ];
            let total = 10;
            this.$nextTick(() => {
                this.$refs.dataInfo.loadData(dataInfo, total);
            })
        },
    }
}
</script>
<style lang="scss" scoped>
.sale-restriction-management {
    .search-form {
        margin-bottom: 15px;
    }
    .table-box {
        background: #fff;
        .control {
            padding: 16px;
            border-bottom: 1px solid #ddd;
        }
        ::v-deep table {
            .el-button {
                margin-bottom: 10px;
            }   
        }
    }
}
</style>